<template>
  <el-select
    ref="select"
    v-model="data"
    filterable
    clearable
    :placeholder="placeholder"
    @clear="clearModelData"
  >
    <el-option
      v-for="item in option"
      :key="item.id"
      :label="item.label"
      :value="item.value"
      @click="handleOptionClick(item)"
    >
      {{ item.selectLabel }}
    </el-option>
  </el-select>
</template>

<script>
import { defineComponent } from 'vue'
export default defineComponent({
  props: {
    modelData: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    },
    //初始化option
    option: {
      type: Array,
      default: () => []
    }
  },
  emits: ['update:modelData', 'getOption', 'modeType'],
  computed: {
    data: {
      get() {
        return this.modelData
      },
      set(value) {
        this.$emit('update:modelData', value)
      }
    }
  },
  data() {
    return {}
  },
  methods: {
    /**
     * 返回选择的option
     * @param {object} data - 选择的option
     */
    handleOptionClick(data) {
      this.$emit('getOption', data)
    },
    clearModelData() {
      this.data = ''
      this.$emit('update:modelData', '')
      this.$emit('modeType', 0)
    }
  },
  watch: {},
  mounted() {
    // console.log(this.option);
  }
})
</script>

<style lang="scss" scoped></style>
